<template>
	<view class="page">
		<view class="func">
			<view class="header">
				<view class="imageBox">
					<image :src="$utils.imagePath('/upload/image/funbanner.png')"
						style="width: 100%; height: 100%; padding: 0; margin: 0;"></image>
				</view>
			</view>
			<view class="bc">

			</view>
			<view class="boyer">
				<view class="item">
					<view class="renWuTitle">
						任务
					</view>
					<view class="moKuiBox">
						<view class="moKui">
							<view class="hang">
								<view class="moKuaiTitle">
									累计客户
								</view>
								<view class="xiangQing">
									详情
								</view>
							</view>
							<view class="hang1">
								<view class="txt">
									{{custonCount}}
								</view>
								<view class="jia">
									家
								</view>
							</view>
							<view class="bgc">
								<!-- <image src="@/static/image/baifang.png" style="width: 100%; height: 100%;"></image> -->
							</view>
						</view>
						<view class="moKui">
							<view class="hang">
								<view class="moKuaiTitle">
									累计收入
								</view>
								<view class="xiangQing">
									详情
								</view>
							</view>
							<view class="hang1">
								<view class="txt">
									0
								</view>
								<view class="jia">
									元
								</view>
							</view>
							<view class="bgc1">
								<!-- <image src="@/static/image/das.png" style="width: 100%; height: 100%;"></image> -->
							</view>
						</view>
					</view>
				</view>

				<view class="listBox">
					<view class="liuChengTitle">
						流程中心
					</view>
					<view class="list">
						<view class="li" @click="$next(`/pages/functionCore/customer/list`,true)">
							<image src="@/static/image/wodekehu.png"
								style="width: 56rpx; height: 52rpx; padding: 0; margin: 24rpx;"></image>
							<view class="liTitle">
								我的客户
							</view>
						</view>
						<view class="li" @click="$next(`/pages/functionCore/groundPush/groundPushCustomer`,true)">
							<image src="@/static/image/ditu.png"
								style="width: 56rpx; height: 52rpx; padding: 0; margin: 24rpx;"></image>
							<view class="liTitle">
								签约协助
							</view>
						</view>

					</view>


					<view class="list">
						<!-- <view class="li" @click="add">
							<image src="@/static/image/kehuyongjin.png"
								style="width: 56rpx; height: 52rpx; padding: 0; margin: 24rpx;"></image>
							<view class="liTitle">
								佣金奖励
							</view>
						</view> -->
						<view class="li" @click="$next(`/pages/functionCore/customCompanyIndex`,true)">
							<image src="@/static/image/company-contact.png"
								style="width: 56rpx; height: 52rpx; padding: 0; margin: 24rpx;"></image>
							<view class="liTitle">
								客户查询
							</view>
						</view>
						<view class="li" @click="$next(`/pages/functionCore/counter`,true)">
							<image src="@/static/image/yongjicesuan.png"
								style="width: 56rpx; height: 52rpx; padding: 0; margin: 24rpx;"></image>
							<view class="liTitle">
								佣金测算
							</view>
						</view>
					</view>
					<view class="list">
						<view class="li" @click="$next(`/pages/contract/list`,true)">
							<image src="@/static/image/qianyue.png"
								style="width: 56rpx; height: 52rpx;  margin: 24rpx;">
							</image>
							<view class="liTitle">
								售电签约
							</view>
						</view>

						<view class="li" @click="$next(`/pages/functionCore/groundPush/intendedCustomer`,true)">
							<image src="@/static/image/xiansuo.png"
								style="width: 56rpx; height: 52rpx; padding: 0; margin: 24rpx;"></image>
							<view class="liTitle">
								提供线索
							</view>
						</view>

					</view>
					<view class="list">
						<view class="li" @click="toMap">
							<image src="@/static/image/ditu.png"
								style="width: 56rpx; height: 52rpx; padding: 0; margin: 24rpx;"></image>
							<view class="liTitle">
								客户池地图
							</view>
						</view>

					</view>

					<view class="zhankai" v-if="false">
						展开
					</view>
				</view>



				<!-- <view class="listBox">
					
					<view class="list">
						<view class="li" @click="$next(`/pages/functionCore/customer/add`,true)">
							<image src="@/static/image/wodekehu.png"
								style="width: 56rpx; height: 52rpx; padding: 0; margin: 24rpx;"></image>
							<view class="liTitle">
								售电签约
							</view>
						</view>
						<view class="li" @click="$next(`/pages/contract/list`,true)">
							<image src="@/static/image/qianyue.png"
								style="width: 56rpx; height: 52rpx;  margin: 24rpx;">
							</image>
							<view class="liTitle">
								售电合同
							</view>
						</view>

					</view>


				</view> -->


			</view>
		</view>

		<status-modal :showSign="showSign" :showSignContract="showSignContract" :tenantCode="tenantCode" :showStatus="showStatus" :userType="userType" :updateDate="userinfo.updateDate"></status-modal>
	</view>
</template>

<script>
	import statusModal from '@/components/statusModal/statusModal.vue'
	import selectRegion from '@/mixin/selectRegion'
	export default {
		mixins: [selectRegion], // 使用混入
		data() {
			return {
				showSign: false,
				showSignContract: false,
				showStatus: false,
				userType: 0,
				userinfo: {},
				custonCount:0,
				areaStrArr:"",
				tenantCode: uni.getStorageSync("tenantCode")
			}
		},
		components: {
			statusModal
		},
		onShow() {

			this.getUser()
			this.getSignedTowner()
			this.getMyCustom()
		},

		methods: {
			getMyCustom(){
				this.$axios.request(this.$api.getCustomRes,"GET",{
					limit:1,
					page:1,
					type:0,
					orderField: 'id',
					order: 'desc'
				}).then((val) => {
					this.custonCount = val.data.total
				})
			},
			getSignedTowner(){
				this.$axios.request(this.$api.getSignedAreaRes,"GET").then((val)=>{
					this.areaStrArr = val.data ||'暂无区域'
				})
			},
			toMap() {
				
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						var url = `/pages/index/webView?url=${this.$utils.encryption("https://v2.zygyx.com/map?user_id="+this.userinfo.id+"&lat="+res.latitude+"&lng="+res.longitude)}`
						this.$next(url)
					}
				})
				
			},
			getUser() {

				this.$axios.request(this.$api.getUser, "GET").then((val) => {
					console.log(val)
					this.userinfo = val.data
					this.userType = val.data.userType
					if (val.data.realname == '') {
						this.showSign = true
						this.showStatus = false
						this.showSignContract = false
					} else if (val.data.status == 0) {
						this.showStatus = true
						this.showSign = false
						this.showSignContract = false
					} else if (val.data.status == 1 && val.data.sign == 0) {
						this.showSignContract = true
						this.showSign = false
						this.showStatus = false
					} else {
						this.showSign = false
						this.showStatus = false
						this.showSignContract = false
					}
					this.mobile = val.data.mobile.substr(0, 3) + "****" + val.data.mobile.substr(7)
				}).catch((e) => {
					console.log(e)
				})
			},

		}
	}
</script>

<style lang="scss">
	.page {
		width: 100%;
		/* height: 100vh; */
		overflow: hidden;
		background-color: #FFFFFF;
	}

	.func {
		.boyer {
			width: 750rpx;
			margin-bottom: 20rpx;
			border-radius: 16rpx 16rpx 0rpx 0rpx;
			background-color: #F9F9FB;
			margin-top: -160rpx;
		}

		.header {
			width: 100%;
			background-color: #2E6ADF;
			position: relative;
		}

		.bc {
			height: 152rpx;
			width: 100%;
			position: relative;
			top: -70px;
			z-index: 1;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 0rpx 0rpx;
		}

		.title {
			height: 48rpx;
			font-size: 34rpx;
			font-family: "PingFang SC";
			font-weight: 600;
			line-height: 48rpx;
			color: #FFFFFF;
			text-align: center;
			margin-top: 108rpx;
		}

		.imageBox {

			width: 686rpx;
			height: 290rpx;
			margin: auto;
			position: relative;
			z-index: 3333;
		}

		// .boyer::before {
		// 	width: 100%;
		// 	height: 152rpx;
		// 	display: inline-block;
		// 	content: '';
		// 	background-color: #FFFFFF;
		// 	border-radius: 16rpx 16rpx 0rpx 0rpx;
		// }

		.item {
			overflow: hidden;
			width: 100%;
			height: 222rpx;
			background-color: #FFFFFF;
			margin-top: 16rpx;
			padding: 0 32rpx;
		}

		.renWuTitle {
			height: 40rpx;
			font-size: 28rpx;
			font-family: "PingFang SC";
			font-weight: 600;
			line-height: 40rpx;
			color: #333333;
			margin-top: 16rpx;
		}

		.moKuiBox {
			display: flex;
			justify-content: space-between;
			width: 100%;
			height: 134rpx;
			margin-top: 16rpx;
		}

		.moKui {
			position: relative;
			top: 0;
			right: 0;
			overflow: hidden;
			width: 320rpx;
			height: 134rpx;
			padding: 0 16rpx;
			background-color: #E8F0FF;
		}

		.hang {
			display: flex;
			justify-content: space-between;
			width: 100%;
			height: 33rpx;
			margin-top: 18rpx;
		}

		.moKuaiTitle,
		.jia {
			height: 33rpx;
			font-size: 24rpx;
			font-family: "PingFang SC";
			font-weight: 400;
			line-height: 35rpx;
			color: #333333;
		}

		.xiangQing {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			z-index: 1;
			width: 42px;
			height: 33rpx;
			font-size: 21rpx;
			font-family: "PingFang SC";
			font-weight: 400;
			line-height: 35rpx;
			background-color: #2E6ADF;
			text-align: center;
			color: #F9F6F6;
		}

		.hang1 {
			display: flex;
			justify-content: flex-start;
			align-items: flex-end;
			width: 100%;
			height: 45rpx;
			margin-top: 22rpx;
		}

		.txt {
			height: 45rpx;
			font-size: 32rpx;
			font-family: "PingFang SC";
			font-weight: 400;
			line-height: 56rpx;
			color: #FF2D55;
			margin-right: 10rpx;
		}

		.jia {
			font-size: 24rpx;
		}

		.listBox {
			overflow: hidden;
			width: 100%;
			/* height: 616rpx; */
			padding: 0 32rpx 24rpx;
			margin: 16rpx auto 0;
			background-color: #FFFFFF;
		}

		.liuChengTitle {
			height: 40rpx;
			font-size: 28rpx;
			font-family: "PingFang SC";
			font-weight: 600;
			line-height: 40rpx;
			color: #333333;
			margin-top: 32rpx;
		}

		.list {
			display: flex;
			justify-content: space-between;
			width: 100%;
			height: 152rpx;
			margin-top: 28rpx;

		}

		.list:first-child {
			margin-top: 16rpx;
		}

		.li {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			width: 320rpx;
			height: 160rpx;
			background-color: #fafafa;
			/* background-color: red; */
		}

		.liTitle {
			height: 40rpx;
			font-size: 28rpx;
			font-family: "PingFang SC";
			font-weight: 600;
			line-height: 40rpx;
			/* margin:0 0 24rpx 24rpx; */
			color: #201E1D;
		}

		.zhankai {
			width: 670rpx;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			font-size: 28rpx;
			font-family: "PingFang SC";
			font-weight: 400;
			color: #414F58;
			background-color: #FFFFFF;
			margin: 16rpx auto 0;
		}

		.bgc {
			position: absolute;
			/* z-index: -999; */
			top: 17rpx;
			right: 40rpx;
			width: 104rpx;
			height: 104rpx;
			background-color: red;
			/* background-image: url('@/static/image/baifang.png') */
			background: url(@/static/image/song.png) no-repeat;
			background-size: 104rpx;
		}

		.bgc1 {
			position: absolute;
			z-index: 0;
			top: 17rpx;
			right: 40rpx;
			width: 104rpx;
			height: 104rpx;
			background: url(@/static/image/feng.png) no-repeat;
			background-size: 104rpx;
		}
	}


	.company {

		.header {
			overflow: hidden;
			width: 100%;
			height: 240rpx;
			background-color: #FFFFFF;
		}

		.itemBox {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 172rpx;
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.3);
		}

		.items {
			width: 100rpx;
			height: 130rpx;
		}

		.itemsTop {
			width: 80rpx;
			padding: 16rpx;
			height: 80rpx;

			background-color: #33C9C6;
			margin: 0 auto;
		}

		.itemsButtom {
			width: 100%;
			height: 33rpx;
			font-size: 24rpx;
			font-family: "PingFang SC";
			font-weight: 500;
			line-height: 33rpx;
			text-align: center;
			color: #333333;
			margin-top: 10rpx;
		}

		.headerButtom {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			width: 100%;
			height: 65rpx;
		}

		.headerButTitle {
			height: 33rpx;
			font-size: 24rpx;
			font-family: "PingFang SC";
			margin: 0 20rpx 0 32rpx;
			font-weight: 600;
			line-height: 33rpx;
			color: #3975EA;
		}

		.info {
			height: 28rpx;
			font-size: 20rpx;
			font-family: "PingFang SC";
			font-weight: 300;
			line-height: 28rpx;
			color: #62656D;
		}

		.banner {
			width: 100%;
			height: 420rpx;
			margin-top: 16rpx;
		}

		.gongGao {
			width: 100%;
			height: 196rpx;
		}

		.yongDianQi {
			width: 100%;
			height: 557rpx;
		}

		.tabData {
			width: 100%;
			height: 686rpx;
		}

		.taoCan {
			overflow: hidden;
			width: 100%;
			/* height: 441rpx; */
			background-color: #FFFFFF;
			margin-top: 16rpx;
		}

		.touTitle {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 65rpx;
			border-bottom: 2rpx solid #F1F1F1;
		}

		.titleInfo {
			height: 33rpx;
			font-size: 24rpx;
			font-family: "PingFang SC";
			font-weight: 600;
			line-height: 33rpx;
			color: #3975EA;
			margin-left: 16rpx;
		}

		.taoCanTitle {
			height: 65rpx;
			font-size: 24rpx;
			font-family: "PingFang SC";
			font-weight: 300;
			line-height: 65rpx;
			text-align: center;
			color: #707070;
			border-bottom: 2rpx solid #F1F1F1;
		}

		.heneng {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 686rpx;
			height: 276rpx;
			margin: 0 auto 0;
		}

		.foodter {
			width: 100%;
			height: 163rpx;
			margin-top: 16rpx;
			background-color: #FFFFFF;
		}

		.list {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 32rpx;
			width: 100%;
			height: 96rpx;
		}

		.kuai {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 180rpx;
			height: 64rpx;
			margin-right: 24rpx;
			background-color: #E8F0FF;
		}
	}
</style>